<html>
<head >
	<meta charset="UTF-8"/>
	<meta name="referrer" content="no-referrer" />
	<title>视频页面</title>
	<link rel="stylesheet" href="css/button.css">
	<style>
		body{
			background-color: #AAAAAA;
			margin:0px;
			padding:0px;
		}
		.div_top{
			height:50px;
			width:100%;
		}
		.div_menu{
			height:50px;
			width:4%;
			margin-left:1%;
			float:left;
			text-align:center;
			line-height:50px;
			font-size:14px;
			color:#ccc7d9;
		}
		.div_tittle{
			height:90px;
			width:100%;
		}

		.userlogo{
			height:78px;
			width:78px;
			margin-left:6%;
			margin-top:0.5%;
			float:left;
			background-color: #00FFFF;
		}
		.user_text{
			height:28px;
			width:82%;
			float:left;
			margin-left:1%;
		}
		.div_display{
			width:94%;
			height:600px;
			margin-left:5%;
			position:relative;
		}
		.div_photo{
			width:179px;
			height:260px;
			float:left;
			margin-top:2%;
			margin-left:1%;
			text-align:center;
			background-color:#353a54;
		}
		#photos{
			width:100%;
			height:80%;
		}
		.photo_text{
			text-align:center;
			font-size:13px;
			line-height:26px;
			color:#ccc7d9;
		}
		.t{
			height:28px;
			width:99%;
			margin-left:1%;
			margin-top:0.8%;
		}
		.t1{
			height:28px;
			width:100%;
			margin-top:0.8%;
			font-size:20px;
			color:#ccc7d9;
		}
		.t2{
			height:35px;
			width:100%;
			margin-top:1%;
			margin-left:1%;
		}
		.update_download{
			height:35px;
			width:165px;
			color:#fffad9;
			background-color: #006F47;
			line-height:35px;
			text-align:center;
			font-size:14px;
			float:left;
		}
		.t3{
			height:35px;
			width:80px;
			color:#fffad9;
			background-color:#006F47;
			line-height:35px;
			text-align:center;
			font-size:14px;
			float:left;
			margin-left: 5px;
			/*line-height:35px;
			text-align:center;
			font-size:14px;
			color:#ccc7d9;
			margin-left:2%;
			float:left;
			background-color:#353a54;*/
		}
	</style>
	<!-- 179000529张书豪 -->
	<script src="jquery-3.4.1/jquery-3.4.1.js"></script>
	<script>
		$(function () {
			function tt(srcPic,movieName,grade,content) {
				let newRow = $("<div></div>");
				newRow.addClass("div_photo");
				let col1 = $("<img></img>");
				col1.attr("src",srcPic);
				col1.attr("id","photos");
				let col2 = $("<div></div>");
				col2.addClass("photo_text");
				col2.html(movieName);
				let col3 = $("<span></span>");
				col3.html(grade);
				col3.css({"color":"red","margin-left": "5px"});
				col2.append(col3);
				newRow.append(col1);
				newRow.append(col2);
				$("#"+content+"").append(newRow);
			}
			let city1 = "重庆";
			find("https://douban.uieee.com/v2/movie/in_theaters",city1);
			function find(url,City) {
				$.ajax({
					method:"get",
					url:url,
					data:{city:City},
					dataType:"jsonp",
					success:function (r) {
						console.log(r.subjects.length);
						for(let i = 0; i < r.subjects.length; i++){
							tt(r.subjects[i].images.large,r.subjects[i].title,r.subjects[i].rating.average,"msg1")
						}
					}
				})
			}

			$("#update_download").click(function () {
				$("#msg1").empty();
				find("https://douban.uieee.com/v2/movie/in_theaters",city1);
			})

			$("#ji").click(function () {
				$("#msg1").empty();
				find("https://douban.uieee.com/v2/movie/coming_soon",city1);
			})

			$(".top250").click(function () {
				$("#msg1").empty();
				find("https://douban.uieee.com/v2/movie/top250",city1);
			})
		})
	</script>
</head>
<body>
<div class="div_top">
	<div class="div_menu" style="margin-left:5%;">电影</div>
	<div class="div_menu">电视剧</div>
	<div class="div_menu">综艺</div>
	<div class="div_menu">动漫</div>
</div>
<div class="div_tittle">
	<div class="userlogo"><img height=70 width=70 src="../images/222.jpg" style="padding:4px;"></div>
	<div class="user_text">
		<div class="t">
			<div class="t1">最近热门电影 <span>默认城市地：重庆</span></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="t2">
			<div class="update_download" id="update_download">最近热门电影</div>
			<div class="t3">豆瓣高分</div>
			<div class="t3 top250" style="width:100px;">冷门佳片</div>
			<div class="t3 ji" id="ji" style="width:100px;">即将上映</div>
		</div>
	<!--	<div id="maxBox">
			<button id="dx_BS1" class="dx_BS t3r"  onclick="chooseType(this)">按钮一</button>
			<button id="dx_BS2" class="dx_BS t3 btnCss layui-btn layui-btn-sm layui-btn-me-server"  onclick="chooseType(this)">按钮二</button>
			<button id="dx_BS3" class="dx_BS t3 btnCss layui-btn layui-btn-sm layui-btn-me-server"  onclick="chooseType(this)">按钮三</button>
			<button id="dx_BS4" class="dx_BS t3 btnCss layui-btn layui-btn-sm layui-btn-me-server"  onclick="chooseType(this)">按钮四</button>
		</div>-->
	</div>
</div>
<div class="div_display" id="msg1" >
	<div class="div_photo" style="display: none">
		<img id="photos" src=""/>
		<div class="photo_text">2018-09-18</div>
	</div>
<script>
	//方法二
	function chooseType(e) {
		//获取点击按钮 id
		var canshu = $(e).attr("id");
		//获取相同 class 的兄弟元素（首先需要为所有的兄弟元素添加相同的class）
		va
		for (var i = 0; i < arr.length; i++) {
			//遍历所有子元素移除 高亮 class
			arr[i].classList.remove("upBtnCss");
		}
		// 为点击的按钮添加 高亮 class
		document.getElementById(canshu).classList.add("upBtnCss");
	}
</script>
</div>
</body>
</html>
